<ion-header>
  <ion-navbar>
    <ion-title>Item Ribbon</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of thumbnails">
      <ion-thumbnail item-left class="item-ribbon">
        <span class="ribbon {{ item.class }}">
          <span>{{ item.ribbonText }}</span>
        </span>
        <img [src]="item.image">
      </ion-thumbnail>
      <div>
        <p>{{ item.title }}</p>
      </div>
    </ion-item>

    <ion-item class="item-ribbon">
        <span class="ribbon cruzeiro">
          <span>Ionic</span>
        </span>
      <ion-thumbnail item-left>
        <img src="assets/img/ribbon/ionic.png" alt="">
      </ion-thumbnail>
      <div>
        <p>Awesome framework</p>
      </div>
    </ion-item>

    <ion-item class="item-ribbon">
        <span class="ribbon javascript">
          <span>JS</span>
        </span>
      <ion-thumbnail item-left>
        <img src="assets/img/ribbon/js.png" alt="">
      </ion-thumbnail>
      <div>
        <p>Awesome language</p>
      </div>
    </ion-item>

  </ion-list>

</ion-content>
